<template>
	<view>
		<uniNavBar
			title='支付'
			left-text='关闭'
			fixed='true'
			status-bar='true'
			@clickLeft='goBack'
		></uniNavBar>
		<view class="pay-main">
			<label for="">
				<view class="pay-item">
					<image class="pay-img" src="@/static/alipay.jpg" mode=""></image>
					<view>
						<view>支付宝支付</view>
						<view class="pay-text">推荐支付宝用户使用</view>
					</view>
					<label class="radio">
						<radio value="alipay" color="#ff3333" /><text></text>
					</label>
				</view>
			</label>
			<label for="">
				<view class="pay-item">
					<image class="pay-img" src="@/static/wx.jpg" mode=""></image>
					<view>
						<view>微信支付</view>
						<view class="pay-text">推荐微信用户使用</view>
					</view>
					<label class="radio">
						<radio value="wxpay" color="#ff3333" /><text></text>
					</label>
				</view>
			</label>
		</view>
		<!--去支付-->
		<view class="pay-foot">
			<view class="total">
				<text>合计</text>
				<text>￥{{ totalPrice }}</text>
			</view>
			<view class="go-pay" @click="goPay">去支付</view>
		</view>
	</view>
</template>

<script>
  import config from '@/config';
  import uniNavBar from '@/components/uni/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue';

  export default {
    components: {
      uniNavBar,
    },
    data() {
      return {
        totalPrice: '',
      };
    },
    mounted() {
      this.getTotalPrice();
    },
    methods: {
      getTotalPrice() {
        this.totalPrice = uni.getStorageSync('totalPrice');
        console.log("总金额：" + this.totalPrice);
      },
      goBack() {
        uni.navigateBack({
          delta: 1
        });
        console.log("返回上一页");
      },
      goPay() {
             const orderIds = uni.getStorageSync('orderIds');  // 读取存储的订单ID
             console.log("goodspayment orderIds:", orderIds);
             if (orderIds) {
                 uni.request({
                     url: `${config.apiUrl}/order/updateOrderState1`,
                     method: 'POST',
                     data: JSON.stringify(orderIds),
                     header: {
                         'Content-Type': 'application/json'
                     },
                     success: (response) => {
                         if (response.statusCode === 200) {
                             uni.reLaunch({
                                 url: "/pages/pay/pay-success"
                             });
                         } else {
                             uni.showToast({
                                 title: '更新订单状态失败',
                                 icon: 'none'
                             });
                         }
                     },
                     fail: (error) => {
                         console.error('Request failed:', error);
                         uni.showToast({
                             title: '请求失败，请重试',
                             icon: 'none'
                         });
                     }
                 });
             } else {
                 uni.showToast({
                     title: '无订单 ID',
                     icon: 'none'
                 });
             }
         }
    }
  };
</script>
<style scoped>
	.pay-main {
		height: 1200rpx;
		background-color: #FFEFBA;
	}
	.pay-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		border-bottom: 2rpx solid #cccccc;
		background-color: #FFEFBA;
	}
	.pay-text {
		color: darkgray;
		margin-top: 10rpx;
	}
	.pay-img {
		width: 100rpx;
		height: 100rpx;
	}
	.pay-foot {
		display: flex;
		justify-content: space-between;
		position: fixed;
		left: 0;
		bottom: 0;
		height: 100rpx;
		align-items: center;
		width: 100%;
		background-color: #FFFFFF;
	}
	.total {
	    line-height: 100rpx;
	    color: #000000;
	    flex: 1;
	    display: flex;
	    align-items: center; /* 垂直居中 */
	    padding-left: 20rpx; /* 减少左侧填充 */
	}

	.go-pay {
		line-height: 100rpx;
		text-align: center;
		width: 220rpx;
		color: #000000;
		background-color: #EACD6F;
	}
</style>
